<template>
  <Card>
    <Tabs type="card"
          @on-click="onTab">
      <TabPane v-for="(item, index) in coinIdList"
               :key="index"
               :label="item.coinid">
        <i-col :xs="8"
               :md="8"
               :lg="8"
               style="text-align: center;">
          <count-to :end="item.info.todayBuyTotal"
                    count-class="count-style" />
          <p>今日挂买</p>
        </i-col>

        <i-col :xs="8"
               :md="8"
               :lg="8"
               style="text-align: center;">
          <count-to :end="item.info.todaySellTotal"
                    count-class="count-style" />
          <p>今日挂卖</p>
        </i-col>
        <i-col :xs="8"
               :md="8"
               :lg="8"
               style="text-align: center;">
          <count-to :end="item.info.totalDeal"
                    count-class="count-style" />
          <p>今日成交</p>
        </i-col>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script>
import {
  getStatistics
} from '@/api/common'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { mapActions } from 'vuex'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo
  },
  data () {
    return {
      coinIdList: [],
      inforCardData: [
        { title: '待开放', icon: 'md-reorder', count: 0, color: '#2d8cf0' },
        { title: '待开放', icon: 'md-locate', count: 0, color: '#19be6b' },
        { title: '待开放', icon: 'md-help-circle', count: 0, color: '#ff9900' },
        { title: '待开放', icon: 'md-share', count: 0, color: '#ed3f14' },
        { title: '待开放', icon: 'md-chatbubbles', count: 0, color: '#E46CBB' }
      ]
    }
  },
  mounted () {
    this.coinIdList = []
    this.getCoinSell()
  },
  methods: {
    ...mapActions([
      'getCoinTradingList'
    ]),
    onTab (e) {
      this.getStatistics(e)
    },
    getCoinSell () { // 获取可挂售币种
      this.getCoinTradingList().then(res => {
        const data = res.data
        data.forEach(e => {
          this.coinIdList.push({
            coinid: e,
            info: {
              todayBuyTotal: 0,
              todaySellTotal: 0,
              totalDeal: 0
            }
          })
        })
        this.getStatistics(0)
      })
    },
    getStatistics (e) {
      getStatistics({ coinId: this.coinIdList[e].coinid }).then(res => {
        this.$set(this.coinIdList[e], 'info', res.data)
      })
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
